<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<!-- form表单元素 action提交到服务器得地址
		enctype 提交数据得格式 
		method提交数据得方法 get post
	-->
	<form action="test.php" enctype="application/x-www-form-urlencoded" method="GET">
		<!-- 表单元素输入框 -->
		<!-- 明文输入框 -->
		<!-- name属性表示提交到服务器得属性 属性值可以是用户输入得 也可以是默认 -->
		<!-- readonly设置表单元素为只读 -->
		<!-- disabled设置表单元素禁用 -->
		<!-- 单选框复选框 默认选中checked属性 -->
		用户名: <input readonly type="text" name="username" value="张三">
		<!-- 暗文输入框 -->
		密码: <input disabled type="password" name="password"><br>
		性别:
		<!-- 想要让单选按钮有互斥效果 给单选按钮设置name为同一个属性 gender='男' gender='女' -->
		<!-- label标签作用 可以让点击文字也让表单元素有选中得效果 -->
		<label for="male">
			男: <input id="male" type="radio" name="gender" value="男">
		</label>
		<label>
			女: <input checked type="radio" name="gender" value="女"><br>
		</label>
		<!-- 复选框按钮 -->
		爱好:
		篮球：<input type="checkbox" name="hobbies" value="basketball">
		足球：<input type="checkbox" name="hobbies" value="football">
		游泳：<input checked type="checkbox" name="hobbies" value="swiming"><br>
		<!-- 多行文本框 -->
		描述:
		<textarea cols="30" rows="10"></textarea>
		<!-- 下拉框 默认选中值使用selected -->
		城市:
		<select name="city" multiple>
			<optgroup label="一线城市">
				<option value="beijing">北京</option>
				<option value="shanghai">上海</option>
				<option value="suzhou">苏州</option>
			</optgroup>
			<optgroup label="二线城市">
				<option value="ty">太原</option>
				<option value="bj" selected>宝鸡</option>
				<option value="sh">绥化</option>
			</optgroup>
		</select><br>
		<!-- 普通按钮 配合js完成一些操作-->
		<input type="button" value="点击我"><br>
		<!-- 附件上传按钮 -->
		<input type="file" name="photo" ><br>
		<!-- 图片按钮 配合js完成一些操作-->
		<!-- <input type="image" src="../Day01/音视频/2.jpg" alt=""> -->
		<!-- 隐藏域 type hidden 悄悄地提交数据到服务器 -->
		<input type="hidden" name="token" value="123qweasd">
		<!-- 重置表单元素 重置用户填写得数据 不会重置默认值表单元素-->
		<input type="reset" value="重置">
		<!-- 提交表单元素 -->
		<input type="submit" value="提交">
		<!-- 表单元素自带边框 类似于 div加边框 -->
		<fieldset>
			<!-- 边框标题 -->
			<legend>请登录</legend>
			用户名：<input type="text" >
			密码：<input type="text" >
		</fieldset>
	</form>
</body>

</html>